<template>
  <div class="bg-shadow">
    <div class="transfer">
      <div class="header flex-center">
        <span>{{step == 1 ? type==1? "充值" : "扣除" : "身份验证"}}</span>
        <i class="iconfont iconguanbi" @click="$emit('cancel')"></i>
      </div>
      <el-form
        v-if="step == 1"
        ref="form1"
        :model="form1"
        :rules="rules1"
        class="form"
        label-width="150px"
        label-position="left"
        size="small"
      >
        <el-form-item label="币种" prop="currency">
          <el-select v-model="form1.currency" placeholder="请选择币种" filterable>
            <el-option
              v-for="item in currencyList"
              :key="item.coin_id"
              :label="item.currency"
              :value="item.currency"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="划转数量" prop="amount">
          <el-input v-model="form1.amount" placeholder="请填写划转数量"></el-input>
        </el-form-item>
        <div class="flex-center">
          <el-button size="small" type="primary" @click="confirm()" :disabled="canOperate">确定</el-button>
        </div>
      </el-form>
      <el-form
        v-if="step == 2"
        ref="form"
        :model="form2"
        class="form"
        label-width="150px"
        label-position="left"
        size="small"
      >
        <el-form-item label="验证手机号" prop="mobile">
          <el-input v-model="form2.mobile" placeholder disabled></el-input>
        </el-form-item>
        <el-form-item label="手机验证码" prop="sms_code">
          <el-input v-model="form2.sms_code" placeholder="请填写手机验证码"></el-input>
        </el-form-item>
        <el-form-item label="验证邮箱" prop="email">
          <el-input v-model="form2.email" placeholder disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱验证码" prop="email_code">
          <el-input v-model="form2.email_code" placeholder="请填写邮箱验证码"></el-input>
        </el-form-item>
        <div class="flex-center">
          <el-button size="small" type="primary" @click="submit()" :disabled="canOperate">确定</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  getInfoTransaction,
  getTransactionMobileCode,
  getTransactionEmailCode,
  transfer
} from "@/views/UserManage/User.service.js";
import { supTokens } from "@/views/FlashChange/FlashChange.service";

export default {
  props: ["uid", "type"],
  data() {
    return {
      step: 1,
      currencyList: [],
      code_verify_open: true, //是否需要通过验证码
      canOperate: false,
      form1: {
        currency: null,
        category: null
      },
      form2: {
        sms_code: null,
        email_code: null,
        mobile: null,
        email: null
      },
      rules1: {
        currency: [
          { required: true, message: "币种不能为空", trigger: "blur" }
        ],
        amount: [{ required: true, message: "数量不能为空", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    category() {
      return [{ label: "数量", value: "1" }, { label: "价值", value: "2" }];
    }
  },
  methods: {
    async init() {
      this.step = 1;

      let info = await getInfoTransaction();
      Object.assign(this.form2, info.data);
      this.code_verify_open = info.data.code_verify_open;

      let res2 = await supTokens();
      this.currencyList = res2.data || [];
    },
    async confirm() {
      this.$refs["form1"].validate(async valid => {
        if (valid) {
          //不需要验证码的情况 直接划转
          if (!this.code_verify_open) {
            this.submit();
            return;
          }

          let pass = false;
          if (this.form2.mobile) {
            let res = await getTransactionMobileCode(this.form2);
            if (res.code == 1) pass = true;
          }

          if (this.form2.email) {
            let res = await getTransactionEmailCode(this.form2);
            if (res.code == 1) pass = true;
          }

          if (pass) {
            this.step = 2;
          }
        } else {
          this.$notify.warning({
            title: "提示",
            message: "请检查参数！"
          });
        }
      });
    },
    async submit() {
      this.canOperate = true;
      let param = {
        currency: this.form1.currency,
        amount: this.form1.amount,
        uid: this.uid,
        sms_code: this.form2.sms_code,
        email_code: this.form2.email_code,
        cost_category:
          this.type == 1 ? "backend_transfer_out" : "backend_transfer_in"
      };
      const res = await transfer(param);
      this.canOperate = false;
      if (res.code === 1) {
        this.$notify.success({
          title: "提示",
          message: "划转成功"
        });
        this.$emit("success");
      }
    }
  }
};
</script>

<style lang="scss">
.bg-shadow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.3);
  z-index: 1001;
}

.transfer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  min-width: 600px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;

  .header {
    margin-bottom: 10px;
    padding: 15px 0;

    span {
      font-weight: 600;
      font-size: 18px;
    }

    i {
      position: absolute;
      right: 10px;
      font-size: 20px;
      cursor: pointer;
      transition: 0.2s;
    }

    i:hover {
      color: #409eff;
    }
  }

  .form {
    padding: 20px 50px;
    max-height: 600px;
    overflow-y: scroll;

    .tab-item {
      position: relative;

      label {
        position: absolute;
        top: 55px;
      }
    }

    .el-input-number {
      width: 100%;
    }

    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .el-tabs__item {
      padding: 0 40px;
    }

    .el-upload__tip {
      line-height: 20px;
      color: #d93a49;
    }

    .scaleIMGdisabled {
      .el-upload--picture-card {
        display: none;
      }
    }
  }
}
</style>
